<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>

</head>
<body>
    <div id="app">
        <!-- 登录页面 -->
        <div v-if='!token'>
            <el-button @click='show_login_dialog'>登录</el-button>
            <!-- 模态框 -->
            <el-dialog title="登录" :visible.sync="dialog_login">
                {{form_login}}
                <el-form :model="form_login">
                  <el-form-item label="用户名" :label-width="formLabelWidth_login">
                    <el-input v-model="form_login.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" :label-width="formLabelWidth_login">
                    <el-input v-model="form_login.password" show-password></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialog_login = false">取 消</el-button>
                  <el-button type="primary" @click="to_login">确 定</el-button>
                </div>
            </el-dialog>

        </div>



        <!-- 文章列表 -->
        <div v-else>
            <el-button>发布文章</el-button>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="title"
                label="文章标题"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="内容">
            </el-table-column>
            <el-table-column
                prop="publishTime"
                label="发布时间">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot='scope'>
                    <el-button @click='delete_article(scope.row.id)'>删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        </div>
    </div>
    <script>
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            config.headers['Authorization'] = localStorage.getItem('token');
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        new Vue({
            el:'#app',
            data(){
                return {
                    token:localStorage.getItem('token'),
                    dialog_login: false,
                    form_login:{},
                    formLabelWidth_login:'120px',
                    obj:{
                        page:1,
                        pageSize:10
                    }
                }
            },
            tableData:[],
            created(){
                this.page_query_article()
            },
            methods: {
                // 删除文章
                delete_article(id){
                    alert(id);
                },
                // 分页查询文章
                page_query_article(){
                    axios({
                        url:'http://39.107.221.142:8001/article/pageQuery',
                        method:'get',
                        params: this.obj
                    }).then((res)=>{
                        this.tableData=res.data.data.list;
                    })
                },
                // 登录
                to_login(){
                    axios({
                        url:'http://39.107.221.142:8001/user/login',
                        method:'post',
                        data:this.form_login
                    }).then((res)=>{
                        // 1. 关闭模态框
                        this.dialog_login = false;
                        // 2. 切换页面
                        this.token = res.data.data.token;
                        // 3. 将token设置到浏览器
                        localStorage.setItem('token',res.data.data.token);
                    })
                },
                // 显示模态框
                show_login_dialog() {
                    this.dialog_login = true;
                }
            }
        })
    </script>
</body>
</html>
